<script setup>
import {reactive, ref} from "vue";
import { useRouter } from "vue-router";
import request from "@/utils/request";
  
  const router = useRouter()  

  const getUrl = (name) => {
    return new URL(`../../assets/${name}`, import.meta.url).href
  }
  const imgs = ref([
    getUrl('img2.png'),
    getUrl('img.png'),
  ])

  const state = reactive({
    hots: [
      {id: 1, name: '热门动态', descr: '描述描述描述描述描述描述描述'},
      {id: 2, name: '热门动态', descr: '描述描述描述描述描述描述描述'},
      {id: 3, name: '热门动态', descr: '描述描述描述描述描述描述描述'},
      {id: 4, name: '热门动态', descr: '描述描述描述描述描述描述描述'},
      {id: 4, name: '热门动态', descr: '描述描述描述描述描述描述描述'},
      {id: 4, name: '热门动态', descr: '描述描述描述描述描述描述描述'},
      {id: 4, name: '热门动态', descr: '描述描述描述描述描述描述描述'},

    ],
    goods: [],
    categories: [],
    news: [
      {id: 2, name: '校园资讯'},
      {id: 2, name: '校园资讯'},
      {id: 2, name: '校园资讯'},
      {id: 2, name: '校园资讯'},
      {id: 2, name: '校园资讯'},
      {id: 2, name: '校园资讯'},
    ]
  })

const pageNum = ref(1)
const pageSize = ref(5)
const total = ref(0)
const activeCategory = ref(0)

  
const loadCategory = () => {
  request.get('/category').then(res => {
    state.categories = res.data
    if (state.categories.length != null) {
      activeCategory.value = state.categories[0].id
      loadGoods(activeCategory.value)
    }
  })
}
// 找到对应类别的商品
const loadGoods = (categoryId) => {
  activeCategory.value = categoryId // 高亮切换
  request.get('/goods/fpage', {
    params: {
      name: name.value,
      categoryId: categoryId,
      pageNum: pageNum.value,
      pageSize: pageSize.value
    }
  }).then(res => {
    state.goods = res.data.records
    total.value = res.data.total
  })
}
loadCategory()  // 调用 load方法拿到后台数据
// loadGoods()

const refreshNews = () => {
    // 刷新新闻
}
</script>

<template>
  <div>
    <div style="display: flex">
      <div style="width: 70%">
        <el-carousel :interval="5000" arrow="always" height="400px">
          <el-carousel-item v-for="item in imgs" :key="item" >
            <img :src="item" alt="" style="width: 100%; height: 100%">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div style="width: 30%;  margin-left: 10px">
        <el-card style="height: 400px; overflow: hidden">
          <div style="padding-bottom: 10px; border-bottom: 1px solid #ccc; font-size: 20px; font-weight: bold; color: orangered">热门动态</div>
          <div v-for="(item, index) in state.hots" :key="item.id" style="margin: 10px 0">
            <div class="overflowShow">
              <span style="color: goldenrod">{{ index + 1 }}</span><span style="margin-left: 10px">{{ item.name }}</span>
            </div>
          </div>

        </el-card>
      </div>
    </div>

    <div style="display: flex; margin: 10px 0;">
      <div style="width: 70%; color: #666">
        <div style="margin: 10px 0">
          <div @click="loadGoods(item.id)" v-for="item in state.categories" :class="{'active': activeCategory === item.id}"
              style="margin-right: 5px; background-color: white; padding: 5px 15px; border-radius: 5px;
              display: inline-block; box-shadow: 0 0 5px 0 rgba(0,0,0,0.5); cursor: pointer">
            {{ item.name }}
          </div>
        </div>
        <el-card>
          <div>
              <!--使用卡片轮播渲染内容-->
            <el-row :gutter="10">
              <el-col :span="8" v-for="item in state.goods" :key="item.id">
                <div style="overflow: hidden; margin-bottom: 20px">
                  <img :src="item.imgs[0].url" style="width: 100%; cursor: pointer" @click="router.push('/front/detail?id=' + item.id )">
                  <div style="margin: 5px 0">{{ item.name }}</div>
                  <div style="margin: 5px 0; color: #888888; font-size: 12px" class="text-ellipsis">{{ item.descr }}</div>
                  <div style="margin: 5px 0; color: orangered; font-size: 12px">${{ item.price }} /{{ item.unit }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
          
<!--          分页-->
          <div style="margin: 10px 0">
            <el-pagination
                @current-change="loadGoods(activeCategory)"
                v-model:current-page="pageNum"
                v-model:page-size="pageSize"
                background
                layout="total, prev, pager, next"
                :total="total"
            />
          </div>
        </el-card>
      </div>

      <div style="width: 30%; margin-left: 10px">
        <el-card>
          <div style="padding-bottom: 10px; border-bottom: 1px solid #ccc; ">
            <span style="font-size: 20px; font-weight: bold; color: orange">好物推荐</span>
            <span style="float: right; top: 5px; font-size: 14px; color: #888" class="refresh" @click="refreshNews"><el-icon style="top: 2px"><Refresh /></el-icon> 换一换</span>
          </div>
          <div v-for="(item, index) in state.news" :key="item.id" style="margin: 10px 0">
            <div class="overflowShow"><span style="margin-left: 10px">{{ item.name }}</span></div>
          </div>
        </el-card>
      </div>
    </div>


    
  </div>
</template>

<style scoped>
.refresh:hover {
  cursor: pointer;
}
/*高亮*/
.active {  
  background-color: dodgerblue!important;
  color: white!important;
}
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
</style>
